<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <title>Title</title>
    <style>
        a{text-decoration: none;font-size: 14px;text-align: center}
        a:link{color:#cccccc }
        a:hover{color: white}
        .center{width: 1200px;margin: 0 auto}
        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
        .el-select .el-input {
            width: 110px;
        }
        .input-with-select .el-input-group__prepend {
            background-color: #fff;
        }

        .common {
            margin-right: 30px;
            float: right;
        }
        .cart-option {
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #999999;
            margin-top: 15px;
        }

        .num {
            font-size: 24px;
            font-weight: 700;
            vertical-align: bottom;
            margin: 0 5px;
            color: #ff6f00;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="100px">
            <div class="center">
                <el-row style="height: 25px;background-color: #386582;color: white" >
                    <el-col v-show="localStorage.user==null" span="2"  style="padding: 0 10px" offset="2">
                        <a href="/login.html" style="color: #cccccc">登录</a>

                    </el-col>
                    <el-col v-show="localStorage.user!=null" span="2"  style="padding: 0 10px" offset="2">
                        <a href="/personal.html" style="color: #cccccc">欢迎回来</a>

                    </el-col>
                    <el-col v-show="localStorage.user!=null" span="2"  style="padding: 0 10px" offset="2">
                        <a href="javascript:void(0)" @click="logout()">退出登录</a>

                    </el-col>
                    <el-col span="2" v-show="localStorage.user==null" span="1" style="width: 400px">
                        <a href="/reg.html" style="color: #cccccc">注册</a>
                    </el-col>
                    <el-col span="2"  span="2" offset="1">
                        <a href="/products/list.html">我的订单</a>
                    </el-col>
                    <el-col span="2"  span="2" offset="1">
                        <a href="/help.html">帮助中心</a>
                    </el-col>
                    <el-col span="2"></el-col>
                    <el-col span="2"  span="2" offset="1">
                        <el-dropdown>
              <span class="el-dropdown-link" style="color: #cccccc">我的鹿途
              <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click="location.href='/personal.html'">我的鹿途</el-dropdown-item>
                                <el-dropdown-item @click="location.href='/list.html'">订单中心</el-dropdown-item>
                                <el-dropdown-item @click="location.href='/blog.html'">社区</el-dropdown-item>
                                <el-dropdown-item @click="location.href='/personal/points.html'">我的等级</el-dropdown-item>
                                <el-dropdown-item @click="location.href='/personal/manager.html'">账户管理</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>

                    <el-col span="2" v-show="localStorage.user!=null" span="1"></el-col>

                    <el-col span="12" ></el-col>
                </el-row>
            </div>
            <div class="center" style="height: 60px">
                <el-row gutter="20" style="margin-top: 20px">
                    <el-col span="2" offset="2">
                        <a href="/" style="font-size: 36px;margin: 0; padding: 0;float: right">
                            <img src="imgs/logo.png" style="width: 50px;height: 50px">
                        </a>
                    </el-col>
                    <el-col span="3" style="margin: 0 auto">
                        <span style="color: #278996;font-size: 30px;text-align: center;float: left">鹿途网</span>

                    </el-col>
                    <el-col span="10" offset="1">
                        <el-input placeholder="请输入商品信息"  class="input-with-select" v-model="keyword" @keydown.native.enter="search()">
                            <el-select v-model="select"  slot="prepend" placeholder="请选择">
                                <el-option label="全部" value=0></el-option>
                                <el-option v-for="t in typeArr" :label="t.name" :value="t.id"></el-option>
                            </el-select>
                            <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
                        </el-input>
                    </el-col>
                    <el-col span="4">
                        <div style="font-size: 12px;margin: 0 auto">
                            <p style="margin: 0">服务热线 9:00-17:00</p>
                            <p style="margin: 0;font-weight: bold;font-size: 16px">400  679  6699</p>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-header>
        <el-main>
            <div class="center"
                 style="width: 1200px;height: 800px;background-color: white">
                <el-row gutter="20">
                    <el-col span="4">
                        <el-menu :default-active="activeIndex"
                                class="el-menu-vertical-demo"
                                @open="handleOpen"
                                @close="handleClose"
                                text-color="rgb(39,137,150)">
                            <el-menu-item index="1">
                                <span slot="title">我的购物车</span>
                            </el-menu-item>
                            <el-menu-item index="2">
                                <a href="/order.html"><span slot="title" style="color: rgb(39,137,150)">我的订单</span></a>
                            </el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col span="20">
                        <el-card>
                            <el-table
                                    ref="multipleTable"
                                    :data="contentArr"
                                    tooltip-effect="dark"
                                    style="width: 100%"
                                    @selection-change="handleSelectionChange">
                                <el-table-column
                                        align="center"
                                        label="全选"
                                        type="selection"
                                        width="55">
                                </el-table-column>
                                <el-table-column label="" width="50px">
                                    <template slot-scope="scope">
                                            <el-image
                                                    slot="reference"
                                                    style="width: 50px; height: 50px"
                                                    :src="scope.row.imgUrl"
                                                    fit="cover"/>
                                    </template>
                                </el-table-column>
                                <el-table-column label="商品信息" width="150px"
                                                 prop="name" align="center"></el-table-column>
                                <el-table-column label=""
                                                 align="left" width="200px">
                                    <template slot-scope="scope" >
                                        <div style="color: #9c9c9c;font-size: 10px">类型:{{scope.row.type}}</div>
                                        <div style="color: #9c9c9c;font-size: 10px">
                                            <span v-if="scope.row.startDate!=scope.row.endDate">日期:{{scope.row.startDate}}~{{scope.row.endDate}}</span>
                                            <span v-else>日期:{{scope.row.startDate}}</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="单价"
                                                 prop="price" align="center" width="120px">
                                    <template slot-scope="scope">
                                        <div>￥{{ scope.row.price }}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="数量"
                                                 align="center" width="150px">
                                    <template slot-scope="scope" >
                                        <el-input-number v-model="scope.row.quantity" controls-position="right" @change="handleChange" :min="1" :max="100" style="width: 100px"></el-input-number>
                                    </template>
                                </el-table-column>
                                <el-table-column label="金额" width="100px" header-align="center" align="right">
                                    <template slot-scope="scope">
                                        <div style="color: #ff6f00;font-weight: bold">￥{{ (scope.row.price * scope.row.quantity).toFixed(2) }}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作"  width="100px" fixed="right"
                                                 align="center">
                                    <template slot-scope="scope">
                                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                            <el-button
                                                    size="mini"
                                                    type="danger"
                                                    icon="el-icon-delete"
                                                    @click="deleteCartGoods(scope.row)"/>
                                        </el-tooltip>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="cart-option">
                                <div>
                                    <el-button type="danger" style="float: right;background-color: #ff6f00"  @click="pay">去支付</el-button>
                                    <div class="common">总价(不含运费)：<span class="num">￥{{cartTotalPrice}}</span></div>
                                    <div class="common">已选择<span class="num">{{selectGoodsList.length}}</span>件商品</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </el-main>
        <el-footer style="margin: 0;padding: 0">
            <my-footer></my-footer>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入Axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!--引入自己的js文件-->
<script src="js/my-footer.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                activeIndex:'1',
                totalPrice:"",
                oneDay:["亲子","探险","远足"],
                select: '0',
                typeArr:[],
                contentArr:[],
                selectGoodsList: [],
                keyword:'',
                order:{subject:"小米手机",outTradeNo:"16569211212140",totalAmount:"12300.0",body:"欢迎光临小米商城"}
            }
        },
        computed:{
            //选中商品总价
            cartTotalPrice () {
                let sum = 0
                this.selectGoodsList.forEach(item => {
                    sum += item.price * item.quantity
                })
                // 因为要保留小数点后面两位，所以要toFixed(2)
                return sum.toFixed(2)
            }
        },
        methods: {
            logout(){
                if (confirm("您确认退出登录吗?")){
                    //发请求退出登录
                    axios.post("/v1/users/logout").then(function () {
                        localStorage.clear();//清空登录成功时保存的数据
                        location.href="/";
                    })
                }
            },
            //复选框选择事件
            handleSelectionChange(val) {
                this.selectGoodsList = val;
            },
            //调整商品数量
            handleChange(value) {
                console.log(value);
            },
            //删除单个商品
            deleteCartGoods (orderInfo) {
                this.$confirm('此操作将移除购物车的商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    // 这里调用接口删除的方法
                }).catch((e) => {
                    console.log(e)
                    this.$message.info('已取消删除')
                })
            },
            //搜索商品
            search(){
                axios.get("/v1/carts/"+v.select+"/search?keyword="+v.keyword).then(function (response) {
                    if(response.data.code==1){
                        v.contentArr=response.data.data;
                    }
                })
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            pay(){
                //生成订单
                axios.post("/v1/order/addOrders",v.selectGoodsList);
                //进行支付
                v.order.totalAmount=v.cartTotalPrice;
                axios.post("/alipay",v.order).then(function (response) {
                    const div=document.createElement('div')
                    div.innerHTML = response.data;
                    document.body.appendChild(div);
                    document.forms['punchout_form'].setAttribute('target','_blank');
                    document.forms['punchout_form'].submit()
                })
            }

        },
        created:function (){
            //获取购物车列表
            axios.get("/v1/carts/selectAll").then(function (response) {
                if(response.data.code==1){
                    v.contentArr=response.data.data;
                }
            })

            //获取搜索左边的类型列表
            axios.get("/v1/category/").then(function (response) {
                if(response.data.code==1){
                    v.typeArr=response.data.data;
                }
            })
        }

    })
</script>
</html>